<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="类别" prop="type">
        <el-select v-model="queryParams.type" placeholder="请选择类别" clearable>
          <el-option
            v-for="dict in dict.type.zhwy_shop_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="行业" prop="trade">
        <el-input
          v-model="queryParams.trade"
          placeholder="请输入行业"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="合同状态" prop="state">
        <el-select v-model="queryParams.state" placeholder="请选择合同状态" clearable>
          <el-option
            v-for="dict in dict.type.zsht_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" size="mini" @click="openmrsf">默认收费项目(出租)</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" size="mini" @click="openmrsfcs">默认收费项目(出售)</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['hyj:rentalcontract:add']"
        >发起合同</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['hyj:rentalcontract:remove']"
        >删除合同</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['hyj:rentalcontract:export']"
        >导出</el-button>
      </el-col>

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

   <!--
    展示表单
  -->

    <el-table v-loading="loading" :data="rentalcontractList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="编号" align="center" prop="id" />
      <el-table-column label="类别" align="center" prop="type">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.zhwy_shop_status" :value="scope.row.type"/>
        </template>
      </el-table-column>
      <el-table-column label="租金" align="center" prop="rent" />
      <el-table-column label="行业" align="center" prop="trade" />
      <el-table-column label="详细说明" align="center" prop="remark" />
      <el-table-column label="出租时长" align="center" prop="taxi" >
        <template slot-scope="scope">{{scope.row.taxi}}月</template>
        </el-table-column>
      <el-table-column label="合同状态" align="center" prop="state">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.zsht_status" :value="scope.row.state"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
              @click="lookaddsfxm(scope.row)"
          >查看收费项</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['hyj:rentalcontract:edit']"
          >编辑合同</el-button>


          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="myhandlerollback(scope.row)"
          >撤销合同</el-button>
          <!--  v-hasPermi="['hyj:rentalcontract:roback']" -->



        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


    <!--
      添加或修改租售合同对话框
    -->

    <el-dialog :title="title" :visible.sync="open" width="800px" @close="cancel"  append-to-body>
      <el-progress :stroke-width="10" style="width: 700px;" :percentage="percentage" :color="customColorMethod"></el-progress>
      <h2 v-if="percentage==100  && title==='添加租售合同'">默认收费项目</h2>
      <el-table v-if="percentage==100"
    :data="mrsfList"
    height="250"
    border
    style="width: 100%;margin-top: 40;">

    <el-table-column
      prop="id"
      label="编号"
      width="80"
      >
    </el-table-column>
    <el-table-column
      prop="name"
      label="收费项目名"
      width="280">
    </el-table-column>
    <el-table-column
      prop="univalence"
      label="单价"
      width="280">
    </el-table-column>
    <el-table-column label="操作(禁止)">
      <template slot-scope="scope">

          <el-button  disabled
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="removemrsf(scope.row)"
          >删除</el-button>
          <!--  v-hasPermi="['hyj:rentalcontract:roback']" -->

        </template>
    </el-table-column>
    </el-table>
    <!-- && title==='添加租售合同' -->
    <h2 v-if="percentage==100 && title==='添加租售合同'">增加非默认收费</h2>
<!--

    <el-button
    v-if="percentage==100"
           size="medium"
           type="text"
           icon="el-icon-plus"
         >添加非默认收费</el-button> -->

         <el-table  v-if="percentage==100 && title==='添加租售合同'"
    ref="multipleTable"
    :data="notmrsfList"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="addHtSfxmChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
   <el-table-column
      prop="id"
      label="编号"
      width="80">
    </el-table-column>
    <el-table-column
      prop="name"
      label="收费项目名"
      width="280">
    </el-table-column>
    <el-table-column
      prop="univalence"
      label="单价"
      width="280">
    </el-table-column>
    </el-table>

      <!-- 表单 -->
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="margin-top: 50px;">
        <el-form-item label="选择商铺" prop="shopsId" v-if="percentage==20">
          <el-select v-model="form.shopsId" placeholder="请选择商铺" >
            <el-option
              v-for="item in shopList"
              :key="item.id"
              :label="item.code"
              :value="parseInt(item.id)"

            >{{ item.finalName }}</el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商铺状态" prop="type"  v-if="percentage==20">
          <el-select v-model="form.type" placeholder="请选择类别" disabled>
            <el-option
              v-for="dict in dict.type.zhwy_shop_status"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            ></el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="开始时间" prop="startTime"  v-if="percentage==20">
          <el-date-picker clearable
            v-model="form.startTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="出租时长" prop="taxi"  v-if="percentage==20">
          <el-input type="number" v-model="form.taxi" placeholder="请输入出租时长(月)" />
        </el-form-item>
        <el-form-item label="租金" prop="rent"  v-if="percentage==20">
          <el-input v-model="form.rent" placeholder="请输入租金" />
        </el-form-item>

        <!-- 查询租户 -->
        <el-form-item label="选择业主" prop="hirerId" v-if="percentage==60">
          <!-- <el-input v-model="form.hirerId" placeholder="请输入租户id" /> -->
          <el-select v-model="form.hirerId" placeholder="请选择业主公司" @change="fuzhi">
            <el-option
              v-for="item in zhList"
              :key="item.id"
              :label="item.company"
              :value="parseInt(item.id)"

            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系人" prop="trade" v-if="percentage==60">
          <el-input v-model="hire.name" placeholder="业主姓名" disabled/>
        </el-form-item>
        <el-form-item label="身份证号" prop="trade" v-if="percentage==60">
          <el-input v-model="hire.code" placeholder="业主身份证号" disabled/>
        </el-form-item>
        <el-form-item label="联系电话" prop="trade" v-if="percentage==60">
          <el-input v-model="hire.phone" placeholder="业主联系方式" disabled/>
        </el-form-item>
        <el-form-item label="从事行业" prop="trade" v-if="percentage==60">
          <el-input v-model="form.trade" placeholder="请输入行业" />
        </el-form-item>
        <el-form-item label="详细说明" prop="remark" v-if="percentage==60">
          <el-input v-model="form.remark" placeholder="请输入详细说明" />
        </el-form-item>

        <el-form-item label="合同状态" prop="state" v-if="percentage==60">

          <el-select v-model="form.state" placeholder="请选择合同状态">
            <el-option
              v-for="dict in dict.type.zsht_status"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">


        <el-button @click="cancel">取 消</el-button>
        <el-button v-if="percentage==100" type="primary" @click="submitForm">确 定</el-button>
        <el-button-group style="padding-left: 10px;" v-if="percentage!=100">
       <el-button  @click="decrease">上一步</el-button>
       <el-button  @click="increase">下一步</el-button>
        </el-button-group>
      </div>
    </el-dialog>

<!--

    查看合同关联收费项目弹窗
 -->

 <el-dialog title="合同关联收费项目明细" :visible.sync="htmrsfdialog" >

       <el-table
    :data="htmrsfList"
    height="250"
    border
    style="width: 100%">

    <el-table-column
      prop="id"
      label="编号"
      width="80"
      >
    </el-table-column>
    <el-table-column
      prop="name"
      label="收费项目名"
      width="280">
    </el-table-column>
    <el-table-column
      prop="univalence"
      label="单价"
      width="280">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">

          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="removehtmrsf(scope.row)"
          >删除</el-button>
        </template>
    </el-table-column>

  </el-table>
      <div style="text-align: center;">
        <el-button

            size="medium"
            type="text"
            icon="el-icon-plus"
            @click="openaddhtmrsf"

          >新增合同关联收费</el-button>
      </div>
     </el-dialog>


<!--
  新增合同关联收费项目弹窗
 -->

<el-dialog title="新增合同关联收费项" :visible.sync="addhtmrsfdialog" >
  <el-button
           size="medium"
           type="text"
           icon="el-icon-plus"
           @click="tianjiahtmrsf"
         >添加关联收费项</el-button>
  <el-table
    ref="multipleTable"
    :data="addhtmrsfList"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="addHtSfxmChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
   <el-table-column
      prop="id"
      label="编号"
      width="80">
    </el-table-column>
    <el-table-column
      prop="name"
      label="收费项目名"
      width="280">
    </el-table-column>
    <el-table-column
      prop="univalence"
      label="单价"
      width="280">
    </el-table-column>
    </el-table>


 </el-dialog>



    <!--
      查看默认收费
    -->

	<el-dialog title="默认收费项目(出租)" :visible.sync="mrsfdialog" >
    <!-- <el-table-column
      label="序号"
      type="index"
      width="80">
    </el-table-column> -->
       <el-table
    :data="mrsfList"
    height="250"
    border
    style="width: 100%">

    <el-table-column
      prop="id"
      label="编号"
      width="80"
      >
    </el-table-column>
    <el-table-column
      prop="name"
      label="收费项目名"
      width="280">
    </el-table-column>
    <el-table-column
      prop="univalence"
      label="单价"
      width="280">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">

          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="removemrsf(scope.row)"
          >删除</el-button>
          <!--  v-hasPermi="['hyj:rentalcontract:roback']" -->



        </template>
    </el-table-column>

  </el-table>
      <div style="text-align: center;">
        <el-button

            size="medium"
            type="text"
            icon="el-icon-plus"
            @click="openaddmrsf"
          >新增收费项</el-button>
      </div>
     </el-dialog>


     <el-dialog title="默认收费项目(出售)" :visible.sync="mrsfdialogcs" >
    <!-- <el-table-column
      label="序号"
      type="index"
      width="80">
    </el-table-column> -->
       <el-table
    :data="mrsfListcs"
    height="250"
    border
    style="width: 100%">

    <el-table-column
      prop="id"
      label="编号"
      width="80"
      >
    </el-table-column>
    <el-table-column
      prop="name"
      label="收费项目名"
      width="280">
    </el-table-column>
    <el-table-column
      prop="univalence"
      label="单价"
      width="280">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">

          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="removemrsfcs(scope.row)"
          >删除</el-button>
          <!--  v-hasPermi="['hyj:rentalcontract:roback']" -->



        </template>
    </el-table-column>

  </el-table>
      <div style="text-align: center;">
        <el-button

            size="medium"
            type="text"
            icon="el-icon-plus"
            @click="openaddmrsfcs"
          >新增收费项</el-button>
      </div>
     </el-dialog>


     <!--
      添加默认收费弹窗
    -->
    <el-dialog title="选择收费项目" :visible.sync="addmrsfdialogcs" >
      <el-button

           size="medium"
           type="text"
           icon="el-icon-plus"
           @click="tianjiamrsfcs"
         >添加</el-button>
      <el-table
    ref="multipleTable"
    :data="notmrsfListcs"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="mrsfhandleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
   <el-table-column
      prop="id"
      label="编号"
      width="80">
    </el-table-column>
    <el-table-column
      prop="name"
      label="收费项目名"
      width="280">
    </el-table-column>
    <el-table-column
      prop="univalence"
      label="单价"
      width="280">
    </el-table-column>
  </el-table>
    </el-dialog>


     <el-dialog title="选择收费项目" :visible.sync="addmrsfdialog" >
      <el-button

           size="medium"
           type="text"
           icon="el-icon-plus"
           @click="tianjiamrsf"
         >添加</el-button>
      <el-table
    ref="multipleTable"
    :data="notmrsfList"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="mrsfhandleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
   <el-table-column
      prop="id"
      label="编号"
      width="80">
    </el-table-column>
    <el-table-column
      prop="name"
      label="收费项目名"
      width="280">
    </el-table-column>
    <el-table-column
      prop="univalence"
      label="单价"
      width="280">
    </el-table-column>

  </el-table>

    </el-dialog>
  </div>
</template>

<script>
import { delmrsf,delmrsfcs,addhtmrsfcontract,delhtmrsflink,notalreadyhtmrsf,alreadyhtmrsf,addmrsf,addmrsfcs,listmrsfcs,listmrsf,notlistmrsfcs,notlistmrsf,getrollbackcontract,listRentalcontract, getRentalcontract, delRentalcontract, addRentalcontract, updateRentalcontract } from "@/api/hyj/rentalcontract";
import{listShops} from "@/api/system/shops";
import{listZyxx} from "@/api/hyj/zyxx"
export default {
  name: "Rentalcontract",
  dicts: ['zsht_status', 'zhwy_shop_status'],
  data() {
    return {
      shopsstate:{
        state:0
      },
      additemRentalcontract:{
        rentalContractId:0,
        chargeItemId:[],
      },
      addhtsfxmId:0,
      addhtmrsfList:[],
      addhtmrsfdialog:false,
      // 查看合同收费弹窗
      itemRentalcontract:{
        chargeItemId:'',
        rentalContractId:'',
      },
      delhtsfxmId:0,
      htmrsfdialog:false,
      htmrsfList:[],

      //添加合同收费项目关联弹窗
      htsfxmmultipleSelection:[],
      //打开添加默认收费弹窗dialog
      addmrsfdialog:false,
      addmrsfdialogcs:false,
      notmrsfList:[],
      notmrsfListcs:[],
      mrsfmultipleSelection:[],
      //默认收费弹窗dialog
      mrsfdialog:false,
      mrsfdialogcs:false,
      mrsfListcs:[],
      mrsfList:[],
      //进度条
      percentage: 20,
      customColor: '#409eff',
        customColors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ],
        // 租户信息
        zhList:[],
        //租户
        hire:{
          code:'',
          name:'',
          phone:null,

        },
      //商铺查询
      shopList:[],
      price:0,
      //商铺对象
      shop:{
        id:'',
        finalName:'',
        shopState:'',
        bName:'',
        dName:'',
        remark:'',
        rentFree:'',
        code:'',
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 租售合同表格数据
      rentalcontractList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: null,
        trade: null,
        state: null
      },
      // 表单参数
      form: {
        // shopsId:'',
        // state:''
      },
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
    this.getLinkZH()
  },
  watch: {

    // 商铺信息
     'form.shopsId'(a,b){
        this.price=0
      for(let item of this.shopList){
        if(item.id==this.form.shopsId){
          this.form.type=item.shopState;
          this.form.rent=item.rentFree;
          this.price=item.rentFree;
          break
        }
      }
      // console.log(this.form);
     },
      'form.taxi'(a,b){
          this.form.rent=this.price*this.form.taxi
    }
    },
  methods: {

    //添加合同收费项目
    tianjiahtmrsf(){
      this.additemRentalcontract.rentalContractId=this.addhtsfxmId
      this.additemRentalcontract.chargeItemId=this.htsfxmmultipleSelection
      addhtmrsfcontract(this.additemRentalcontract).then((result) => {
        this.$message.success("操作成功")
        this.addhtmrsfdialog=false
      }).catch((err) => {

      });
    },
    //打开添加合同收费项目
    openaddhtmrsf(){

      notalreadyhtmrsf(this.addhtsfxmId).then((result) => {
        this.addhtmrsfList=result.rows
      }).catch((err) => {

      });
      this.htmrsfdialog=false
      this.addhtmrsfdialog=true
    },
    //查看合同已添加的收费项
    removehtmrsf(row){
      this.itemRentalcontract.rentalContractId=this.delhtsfxmId
      this.itemRentalcontract.chargeItemId=row.id
      delhtmrsflink(this.itemRentalcontract).then(() => {
        this.htmrsfList.splice(0, 1);
        this.$message.success("删除成功")
      })
      // alreadyhtmrsf(id).then((result) => {
      //     this.htmrsfList=result.rows
      //   })
      // console.log(this.itemRentalcontract);
    },
    lookaddsfxm(row){
        this.htmrsfdialog=true
        let id=row.id
        this.delhtsfxmId=row.id
        this.addhtsfxmId=row.id
        alreadyhtmrsf(id).then((result) => {
          this.htmrsfList=result.rows
        }).catch((err) => {

        });
    },
    //添加修改收费项目
    addEditsfxm(){
    //默认收费
    listmrsf().then((result) => {
      this.mrsfList=[]
        this.mrsfList=result.rows
      })
       notlistmrsf().then((result) => {
        this.notmrsfList=[]
        this.notmrsfList=result.rows
      })
    },
    //添加默认收费
    tianjiamrsf(){
      addmrsf(this.mrsfmultipleSelection).then((result) => {
        this.$message.success("添加成功")
      })
      this.addmrsfdialog=false
      this.notmrsfList=[]
    },
    tianjiamrsfcs(){
      addmrsfcs(this.mrsfmultipleSelection).then((result) => {
        this.$message.success("添加成功")
      })
      this.addmrsfdialogcs=false
      this.notmrsfListcs=[]
    },
    //添加合同收费项目关联选中数据处理方法绑定
    addHtSfxmChange(val){
        this.htsfxmmultipleSelection=[]
        for(let item of val){
            this.htsfxmmultipleSelection.push(item.id)
        }
        console.log(this.htsfxmmultipleSelection);
    },
    //选中数据处理方法绑定
    mrsfhandleSelectionChange(val) {
      this.mrsfmultipleSelection=[]
        for(let item of val){
            this.mrsfmultipleSelection.push(item.id)
        }
      },

    //打开添加默认收费弹窗
    openaddmrsf(){
      this.mrsfdialog=false
      this.addmrsfdialog=true

      notlistmrsf().then((result) => {
        this.notmrsfList=result.rows
      })
    },
    openaddmrsfcs(){
      this.mrsfdialogcs=false
      this.addmrsfdialogcs=true
      notlistmrsfcs().then((result) => {
        this.notmrsfListcs=result.rows
      })
    },
    //删除默认收费
    removemrsf(row){
      let id=row.id
      // this.mrsfdialog=false
      delmrsf(id).then((result) => {
        this.$message.success("删除成功")
      })
      // let length= this.mrsfList.length-1;
          this.mrsfList.splice(0, 1);
    },
    removemrsfcs(row){
      let id=row.id
      // this.mrsfdialog=false
      delmrsfcs(id).then((result) => {
        this.$message.success("删除成功")
      })
      // let length= this.mrsfList.length-1;
          this.mrsfListcs.splice(0, 1);
    },
    //默认收费查询
    openmrsf(){
      // let id=1
      this.mrsfdialog=true
      listmrsf().then((result) => {
        this.mrsfList=result.rows
      })

    },
    openmrsfcs(){
      // let id=1
      this.mrsfdialogcs=true
      listmrsfcs().then((result) => {
        this.mrsfListcs=result.rows
      })

    },
    //赋值 数据处理
    fuzhi(){
      var hire_id=this.form.hirerId
      // console.log(hire_id);
      for(let item of this.zhList){
        if(hire_id==parseInt(item.id)){
          this.hire.code=item.card
          this.hire.name=item.name
          this.hire.phone=item.phone
          break
        }
      }

  // console.log(123);
    },
    //撤销合同
    myhandlerollback(row){
      let id=row.id
      getrollbackcontract(id).then((result) => {
        this.$message.success("撤销成功")

      }).catch((err) => {

      });
      this.getList();
    },
      //进度条
      customColorMethod(percentage) {
        if (percentage < 21) {
          return '#909399';
        } else if (percentage < 70) {
          return '#e6a23c';
        } else {
          return '#67c23a';
        }
      },
      increase() {
        this.percentage += 40;
        if (this.percentage >= 100) {
          this.percentage = 100;
        }


      },
      decrease() {
        if(this.percentage == 100){
          this.percentage=60
        }else{
          this.percentage -= 40;
        }
        if (this.percentage < 0) {
          this.percentage = 0;
        }
      },
      //获取租户信息
      getLinkZH(){
        listZyxx().then((result) => {
          // this.zhList=[]
          this.zhList=result.rows
          // console.log(this.zhList);
        }).catch((err) => {

        });
      },

    // 获取商铺信息
    getLinkShops(){
      listShops(this.shopsstate).then((result) => {
        this.shopList=[]
        let list=result.rows
        // console.log(list);
        for(let item of list){
          this.shop.code=item.code
          this.shop.bName=item.bName
          this.shop.dName=item.dName
          this.shop.remark=item.remark
          this.shop.rentFree=item.rentFree
          this.shop.shopState=item.state
          this.shop.id=item.id
          this.shop.finalName=item.dName+'/'+item.bName+'/'+item.remark
          this.shopList.push(this.shop)
          this.shop={
        id:'',
        finalName:'',
        shopState:'',
        bName:'',
        dName:'',
        remark:'',
        rentFree:'',
        code:''
      }
        }
        // console.log(this.shopList);
      }).catch((err) => {

      });
    },
    /** 查询租售合同列表 */
    getList() {
      this.loading = true;
      listRentalcontract(this.queryParams).then(response => {
        this.rentalcontractList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
      this.percentage=20
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        shopsId: null,
        type: null,
        hirerId: null,
        rent: null,
        trade: null,
        remark: null,
        startTime: null,
        taxi: null,
        endTime: null,
        state: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.shopsstate.state=0
      this.addEditsfxm()

      this.getLinkShops()
      this.reset();
      this.open = true;
      this.form.taxi=parseInt(1)
      this.title = "添加租售合同";
      this.hire={
          code:'',
          name:'',
          phone:null,

        }

    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.shopsstate.state=1
      this.addEditsfxm()

      this.getLinkShops()
      this.reset();
      const id = row.id || this.ids
      getRentalcontract(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改租售合同";
        this.fuzhi()
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateRentalcontract(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
              this.open = false;
            addRentalcontract(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除租售合同编号为"' + ids + '"的数据项？').then(function() {
        return delRentalcontract(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('hyj/rentalcontract/export', {
        ...this.queryParams
      }, `rentalcontract_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>


<style lang="scss" scoped>

</style>
